<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../font/iconfont.css"> -->

    <style>
        .createCode {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" class="pwd">
            <span class="pwd_span"></span>
        </p>
        <p>
            <label for="">手机号:</label>
            <input type="text" class="phone">
            <span class="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" class="email">
            <span class="email_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </div>
</body>
<script>
    // 字节统计
    // 假如一个英文占一个字节  一个中文占两个字节  => 要求用户名字节之和不能超过14?


    var userInp = document.querySelector(".user");
    var userSpan = document.querySelector(".user_span");
    var btn = document.querySelector(".btn");


    userInp.onblur = function () {
        // var user = userInp.value;
        // var chReg = /[\u4e00-\u9fa5]/;
        // // console.log(user.length);
        // var count = 0;
        // for (var char of user) { // 依次去除字符 统计
        //     if (chReg.test(char)) {
        //         count += 2
        //     } else {
        //         count += 1;
        //     }
        // }
        // console.log(count);


        var user = userInp.value;
        var chReg = /[\u4e00-\u9fa5]/g;
        console.log(user.length);

        var arr = user.match(chReg);  // 去除所有中文统计

        var count = user.length;
        if (arr) {
            count += arr.length;
        }

        console.log(count);


    }



</script>

</html>